import React, { useState, useEffect } from 'react';

export default function Demo01() {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({
    name: '张三',
    tel: '191321321',
  });
  const [arr, setArr] = useState([1, 2, 3]);
  const updateCount = () => {
    setCount(() => {
      if (count === 0) {
        return count + 1;
      }
      return count + 5;
    });
  };
  const updateObj = () => {
    setObj(() => {
      return {
        ...obj,
        name: '李四',
      };
    });
  };
  const updateArr = () => {
    setArr(() => {
      return [...arr, (arr[0] = 10)];
    });
  };
  useEffect(() => {
    console.log('组件挂载');
    setCount(1);
    console.log(count);
    return () => {
      console.log('组件将被卸载');
    };
  }, [count]);
  return (
    <div>
      Demo01 练习一
      <br />
      <hr />
      当前：counts的值是：{count},
      <button onClick={updateCount}>点击counts加+</button>
      <br />
      <hr />
      姓名：{obj.name};手机号：{obj.tel}
      <button onClick={updateObj}>点击修改姓名</button>
      <br />
      <hr />
      <ol>
        {arr.map((item, index) => (
          <h1 key={index}>{item}</h1>
        ))}
      </ol>
      <button onClick={updateArr}>点击修改数组</button>
      <br />
      <hr />
      <br />
      <hr />
      <br />
      <hr />
      <br />
      <hr />
      <br />
      <hr />
    </div>
  );
}
